<template>
    <div class="y-nav" :style="{ height: heightComputed }">
        <el-scrollbar style="heigth 100%;">
            <li class="y-nav-item" v-for="item of items" :key="item.title">{{ item.title }}</li>
        </el-scrollbar>
    </div>
</template>

<script>
export default {
    props: {
        height: {
            type: [Number, String],
            default: 40
        },
        items: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        heightComputed({ height }) {
            if (typeof height == 'string') {
                if (/px|%|vh|vw|erm/g.test(height)) {
                    return height
                }
            }
            return `${height}px`
        }
    }
}
</script>

<style lang="less" scoped>
.y-nav {
    background-color: #fff;
    white-space: nowrap;
    .y-nav-item {
    }
}

.el-scrollbar {
    // width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
    height: 100%; // 必须设置el-scrollbar的高度
    .el-scrollbar__wrap {
        // 实际上我们的内容是放在这个div下面的
        // height: 100%;
        // overflow: scroll;
        // overflow-x: hidden;
    }
}
</style>
